<template>
  <div class="container-box">
    <div id="chartLine" ref="chartLine" style="width:100%;height:100%;"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, ref, nextTick, onMounted, getCurrentInstance, watch } from 'vue';
export default defineComponent({
  name: 'LineEchart',
  props: {
    nodes: {
      type: Object,
      default: () => { return [] } 
    }
  },
  setup(props) {
    let myChart:any
    const chartLine = ref()
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const data: any = ref([])
    
    watch(
        () => props.nodes,
        (old, val) => {
          if( val && old !== val) {
            data.value = old;
            initData()
            initChart()
          }
        },
        { immediate: true, deep: true }
    );
    const option = ref({
      tooltip: {
        trigger: 'axis',
      },
      title:{
        text: '直播统计信息',
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        data: ["最大观看人数", "当前观看人数", '总观看人数'],
        textStyle: {
          color: "#B4B4B4"
        },
        right: "0%",
      },
      grid: {
        left: "40px",
        right: "40px",
        top: "50px",
      },
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7'],
        axisLabel: {
          interval: 0,
          lineHeight: 16,
          formatter: function(params) {
            var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 8; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '最大观看人数',
          data: [],
          type: 'bar',
          // stack: 'total',
          // barGap: 0,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#5671c3' },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(86,113,195, 0.2)',
          },
        },
        {
          name: '当前观看人数',
          data: [],
          type: 'bar',
          // stack: 'total',
          // barGap: 0,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#bbe9aa" },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(143,204,122, 0.2)',
          },
        },
        {
          name: '总观看人数',
          data: [],
          type: 'bar',
          // barGap: 0,
          itemStyle: {
            normal: {
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#fac862" },
              ]),
              label: {
                show: false, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'white',
                  fontSize: 12,
                },
              },
            }
          },
          barWidth: 12,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(250,200,98, 0.2)',
          },
        }
      ]
    })
    const initChart = () => {
      nextTick(() => {
        myChart = echarts.init(chartLine.value)
        myChart && myChart.setOption(option.value)
      })
    }
    const initData = () => {
      let _xdata: any = [], _ydata: any = [], _ydata2: any = [], _ydata3: any = [];
      const nodes = data.value
      nodes && nodes.forEach((item: any) => {
        _xdata.push(item.StreamID)
        _ydata.push(item.CurVisitor || 0)
        _ydata2.push(item.AllVisitor || 0)
        _ydata3.push(item.MaxVisitor || 0)
      })
      option.value.xAxis.data = _xdata
      option.value.series[0].data = _ydata3
      option.value.series[1].data = _ydata
      option.value.series[2].data = _ydata2
    }
    return {
      chartLine
    }
  }
})

</script>
<style lang="scss" scoped>
.container-box{
  height: 300px;
  width: 500px !important;
}
</style>